<!DOCTYPE html>
<html>
<head>
    <title>Diagrama de Óptica</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="optics_diagram" width="850" height="400"></canvas>
    <script>
        const canvas = document.getElementById('optics_diagram');
        const ctx = canvas.getContext('2d');

        // --- Constantes y Configuración ---
        const Y_AXIS = 200;
        const LINE_COLOR = '#000000';
        const FONT_COLOR = '#000000';
        const LINE_WIDTH = 1.5;

        // Escala: 10 píxeles por cm
        const scale = 10;

        // Posiciones horizontales (X)
        const X_P = 70;
        const X_L1 = X_P + 20 * scale; // 270
        const X_LB = X_L1 + 18 * scale; // 450 (distancia estimada L1-LB de 18cm)
        const X_M1 = X_LB + 30 * scale; // 750
        const X_M2 = X_M1 - 10 * scale; // 650

        // Dimensiones verticales
        const OBJECT_HEIGHT = 40;
        const LENS_PLANE_HEIGHT = 80;

        // --- Configuración del Contexto de Dibujo ---
        ctx.strokeStyle = LINE_COLOR;
        ctx.fillStyle = FONT_COLOR;
        ctx.lineWidth = LINE_WIDTH;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Funciones Auxiliares ---
        function drawLabelWithSubscript(ctx, label, sub, x, y) {
            const mainFontSize = 22;
            const subFontSize = 16;
            const originalFont = ctx.font;
            ctx.font = `italic ${mainFontSize}px Times New Roman`;
            ctx.fillText(label, x, y);
            ctx.font = `italic ${subFontSize}px Times New Roman`;
            ctx.fillText(sub, x + 9, y + 6);
            ctx.font = originalFont;
        }

        // --- Dibujo de Elementos ---

        // 1. Eje Principal
        ctx.beginPath();
        ctx.moveTo(0, Y_AXIS);
        ctx.lineTo(canvas.width, Y_AXIS);
        ctx.stroke();

        // 2. Objeto P
        const p_top_y = Y_AXIS - OBJECT_HEIGHT;
        ctx.beginPath();
        ctx.moveTo(X_P, Y_AXIS);
        ctx.lineTo(X_P, p_top_y);
        // Punta de flecha
        ctx.moveTo(X_P - 5, p_top_y + 10);
        ctx.lineTo(X_P, p_top_y);
        ctx.lineTo(X_P + 5, p_top_y + 10);
        ctx.stroke();
        // Etiqueta P
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('P', X_P, p_top_y - 15);
        // Anotación 1cm
        ctx.font = '18px Times New Roman';
        ctx.fillText('1cm', X_P + 28, Y_AXIS - OBJECT_HEIGHT / 2);

        // 3. Lente Convergente L1
        const top_y = Y_AXIS - LENS_PLANE_HEIGHT;
        const bot_y = Y_AXIS + LENS_PLANE_HEIGHT;
        const lens_arrow_size = 8;
        ctx.beginPath();
        ctx.moveTo(X_L1, top_y);
        ctx.lineTo(X_L1, bot_y);
        // Punta de flecha superior (^)
        ctx.moveTo(X_L1 - lens_arrow_size, top_y + lens_arrow_size);
        ctx.lineTo(X_L1, top_y);
        ctx.lineTo(X_L1 + lens_arrow_size, top_y + lens_arrow_size);
        // Punta de flecha inferior (v)
        ctx.moveTo(X_L1 - lens_arrow_size, bot_y - lens_arrow_size);
        ctx.lineTo(X_L1, bot_y);
        ctx.lineTo(X_L1 + lens_arrow_size, bot_y - lens_arrow_size);
        ctx.stroke();
        drawLabelWithSubscript(ctx, 'L', '1', X_L1 - 5, top_y - 20);

        // 4. Lente Divergente LB
        ctx.beginPath();
        ctx.moveTo(X_LB, top_y);
        ctx.lineTo(X_LB, bot_y);
        // Punta de flecha superior (v)
        ctx.moveTo(X_LB - lens_arrow_size, top_y - lens_arrow_size);
        ctx.lineTo(X_LB, top_y);
        ctx.lineTo(X_LB + lens_arrow_size, top_y - lens_arrow_size);
        // Punta de flecha inferior (^)
        ctx.moveTo(X_LB - lens_arrow_size, bot_y + lens_arrow_size);
        ctx.lineTo(X_LB, bot_y);
        ctx.lineTo(X_LB + lens_arrow_size, bot_y + lens_arrow_size);
        ctx.stroke();
        drawLabelWithSubscript(ctx, 'L', 'B', X_LB - 5, top_y - 20);

        // 5. Planos M1 y M2 (Líneas discontinuas)
        ctx.save();
        ctx.setLineDash([5, 4]);
        ctx.beginPath();
        ctx.moveTo(X_M1, top_y);
        ctx.lineTo(X_M1, bot_y);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(X_M2, top_y);
        ctx.lineTo(X_M2, bot_y);
        ctx.stroke();
        ctx.restore();
        drawLabelWithSubscript(ctx, 'M', '1', X_M1 - 5, top_y - 20);
        drawLabelWithSubscript(ctx, 'M', '2', X_M2 - 5, top_y - 20);

        // 6. Líneas de Cota (Dimensiones)
        ctx.font = '18px Times New Roman';
        const dim_arrow_size = 6;

        // 20cm: |----->
        const y_dim1 = Y_AXIS + 40;
        ctx.beginPath();
        ctx.moveTo(X_P, y_dim1 - 5); // Marca vertical
        ctx.lineTo(X_P, y_dim1 + 5);
        ctx.moveTo(X_P, y_dim1); // Línea horizontal
        ctx.lineTo(X_L1, y_dim1);
        ctx.moveTo(X_L1 - dim_arrow_size, y_dim1 - 4); // Flecha derecha
        ctx.lineTo(X_L1, y_dim1);
        ctx.lineTo(X_L1 - dim_arrow_size, y_dim1 + 4);
        ctx.stroke();
        ctx.fillText('20cm', (X_P + X_L1) / 2, y_dim1 - 12);

        // 10cm: <--->
        const y_dim2 = Y_AXIS + 40;
        ctx.beginPath();
        ctx.moveTo(X_M2, y_dim2); // Línea horizontal
        ctx.lineTo(X_M1, y_dim2);
        ctx.moveTo(X_M2 + dim_arrow_size, y_dim2 - 4); // Flecha izquierda
        ctx.lineTo(X_M2, y_dim2);
        ctx.lineTo(X_M2 + dim_arrow_size, y_dim2 + 4);
        ctx.moveTo(X_M1 - dim_arrow_size, y_dim2 - 4); // Flecha derecha
        ctx.lineTo(X_M1, y_dim2);
        ctx.lineTo(X_M1 - dim_arrow_size, y_dim2 + 4);
        ctx.stroke();
        ctx.fillText('10cm', (X_M2 + X_M1) / 2, y_dim2 + 15);

        // 30cm: <----|
        const y_dim3 = Y_AXIS + 80;
        ctx.beginPath();
        ctx.moveTo(X_LB, y_dim3); // Línea horizontal
        ctx.lineTo(X_M1, y_dim3);
        ctx.moveTo(X_LB + dim_arrow_size, y_dim3 - 4); // Flecha izquierda
        ctx.lineTo(X_LB, y_dim3);
        ctx.lineTo(X_LB + dim_arrow_size, y_dim3 + 4);
        ctx.moveTo(X_M1, y_dim3 - 5); // Marca vertical
        ctx.lineTo(X_M1, y_dim3 + 5);
        ctx.stroke();
        ctx.fillText('30cm', (X_LB + X_M1) / 2, y_dim3 - 12);
    </script>
</body>
</html>